<!-- 商品详情 -->
<template>
	<div class="page_wrap">
		<header>
			<div class="h_left">
				<i class="iconfont iconarrowLeft-fill" @click="$router.go(-1)"></i>
			</div>
			<div class="h_center"><span>商品详情</span></div>
			<div class="h_right">
				<i class="iconfont icongengduo"></i>
			</div>
		</header>

		<div class="main">
			<div class="banner">
				<div class="pic"><img :src="goodsInformation.goodsDetail.goodsImageList[0].imageSrc" /></div>
			</div>
			<div class="goods_txt">
				<p class="goods_name">{{goodsInformation.goodsDetail.goodsName}}</p>
				<p class="goods_name_sup">商品名称补充说明商品名称补充说明商品名称补充说明商品名称补充说明</p>
			</div>
			<div class="goods_specification">
				<span>规格: 黑色 XXL</span>
				<i class="iconfont iconarrowRight-fill"></i>
			</div>
			<div class="distribution_addr">
				<div class="d_left">
					<img src="../../assets/images/userCenter/prodetails_icon_shipping_normal.png" alt="" />
					<span>广东省广州市</span>
				</div>
				<div class="d_right">
					<i class="iconfont iconarrowRight-fill"></i>
				</div>
			</div>
			<div class="goods_evaluate">
				<div class="e_head">
					<span>商品评价(1)</span>
					<i class="iconfont iconarrowRight-fill"></i>
				</div>
				<div class="e_main">
					<dl>
						<dd>
							<div class="row1">
								<div class="row1_left">
									<i class="iconfont iconxingxing" :class="{bright: indexS<3}" v-for="(s, indexS) in 5"></i>
									<span>156***4525</span>
								</div>
								<div class="row1_right">
									<span>2018-12-20 14:20:30</span>
								</div>
							</div>
							<div class="row2">
								<p>很好吃，下次还会再来。</p>
							</div>
							<div class="row3">
								<ul>
									<li v-for="(img) in 5">
										<div class="pic">
											<img src="../../assets/images/public/t2.png" />
										</div>
									</li>
								</ul>
							</div>
							<div class="row4">
								<p>黑色 XXL</p>
							</div>
						</dd>
					</dl>
				</div>
			</div>
			<div class="query_consult">
				<div class="q_left">
					<i class="iconfont iconhelp"></i>
				</div>
				<div class="q_center">
					<span>问题咨询</span>
				</div>
				<div class="q_right">
					<div class="btn"><span>Ask</span></div>
				</div>
			</div>

			<!--图文详情-->
			<div class="photo_article_details">
				<div class="content">
					<div class="pic" v-for="(img, index) in goodsInformation.goodsDetail.mobileBody">
						<template v-if="img.type=='image'">
							<img :src="img.value" alt="" />
						</template>
					</div>
				</div>
			</div>
		</div>

		<!--底部按钮-->
		<footer>
			<div class="f_content">
				<div class="icon" @click="toPage('kefu')">
					<img src="../../assets/images/prodetails_btn_contact_normal@2x.png" alt="" />
				</div>
				<div class="icon" @click="toPage('cart')">
					<img src="../../assets/images/prodetails_btn_cart_normal@2x.png" alt="" />
				</div>
				<div class="btn" @click="addCart"><span>加入购物车</span></div>
			</div>
		</footer>

		<!--Sku-->
		<Sku :goodsInformation="goodsInformation" @showSkuDialog="showSkuDialog" v-if="showSku"></Sku>
	</div>
</template>

<script>
	import response from '@/testData/goods_detail/detail'; //模拟的数据
	import { Toast, ActionSheet } from 'vant';
	import { getPositionY, smoothScrollTop, topWindScrollY, } from "@/assets/js/utils/utils.js";
	import Sku from "./sku";

	export default {
		data() {
			return {
				goodsInformation: {
					storeInfo: {},
					goodsDetail: {},
				},
				showSku: false,
				opacity_level: 0, //头部透明程度
			};
		},
		watch: {},
		computed: {},
		components: {
			Sku,
		},
		beforeRouteEnter(to, from, next) {
			next();
			//smoothScrollTop();
		},
		beforeRouteLeave(to, from, next) {
			next();
		},
		activated() {},
		deactivated() {},
		created() {
			this.init();
		},
		mounted() {

		},
		methods: {
			init() {
				let res = response.datas;
				let _specJson = res.goodsDetail.specJson;
				for(let x of _specJson) {
					x.selected_specid = null; //高亮的属性id
					x.specValueList.forEach((y, indexX) => {
						y.forbid_operation = false; //控制按钮不可点击(按钮置灰)  true-->置灰
					});
				}
				let _goodsInformation = {};
				_goodsInformation.storeInfo = res.storeInfo;
				_goodsInformation.goodsDetail = {
					goodsId: res.goodsDetail.goodsId,
					goodsName: res.goodsDetail.goodsName,
					goodsPrice: res.goodsDetail.appPrice0,
					goodsSkuList: res.goodsDetail.goodsList,
					mobileBody: JSON.parse(res.goodsDetail.mobileBody),
					goodsImageList: res.goodsDetail.goodsImageList,
					specJson: _specJson,
				};
				this.goodsInformation = _goodsInformation;
				//console.log(_goodsInformation);
			},
			toPage(item) {
				if(item == 'cart') {
					this.$router.push({
						name: 'cart'
					})
				}
				if(item == 'kefu') {
					Toast({
						duration: 1500,
						message: "程序开发中...",
						forbidClick: true,
					});
				}
			},
			addCart() {
				this.showSkuDialog(1);
			},
			showSkuDialog(v) {
				if(v == 1) {
					this.showSku = true;
				} else {
					this.showSku = false;
				}
			},
		}
	}
</script>

<style lang='scss' scoped>
	@import '~@/assets/css/mixin';
	.page_wrap {
		width: 100%;
		height: 100%;
	}
	
	//header
	header {
		/*opacity: 0.5;*/
	}
	
	.main {
		padding: rem(90) 0 0 0;
		.banner {
			.pic {
				width: 100%;
				height: rem(700);
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				img {
					width: 100%;
				}
			}
		}
		.goods_txt {
			padding: rem(20);
			background: #fff;
			p {
				font-size: rem(32);
				color: $fc;
			}
			.goods_name {
				font-weight: bold;
				line-height: rem(50);
			}
			.goods_name_sup {
				line-height: rem(40);
				font-size: rem(28);
				color: #999;
			}
		}
		.goods_specification {
			height: rem(90);
			margin: rem(20) 0 0 0;
			background: #fff;
			padding: 0 rem(20);
			display: flex;
			justify-content: space-between;
			align-items: center;
			span {
				font-size: rem(28);
				color: $fc;
			}
			i {
				font-size: rem(36);
				color: $fc;
			}
		}
		.distribution_addr {
			height: rem(90);
			margin: rem(20) 0 0 0;
			background: #fff;
			padding: 0 rem(20);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.d_left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				img {
					height: rem(40);
					margin: 0 rem(10) 0 0;
				}
				span {
					font-size: rem(28);
					color: $fc;
				}
			}
			.d_right {
				display: flex;
				align-items: center;
				i {
					font-size: rem(36);
					color: $fc;
				}
			}
		}
		.goods_evaluate {
			background: #fff;
			margin: rem(20) 0 0 0;
			.e_head {
				height: rem(90);
				padding: 0 rem(20);
				border-bottom: rem(1) solid #eee;
				display: flex;
				justify-content: space-between;
				align-items: center;
				span {
					font-size: rem(28);
					color: $fc;
				}
				i {
					font-size: rem(36);
					color: $fc;
				}
			}
			.e_main {
				dl {
					dd {
						padding: 0 rem(20);
					}
					.row1 {
						height: rem(80);
						display: flex;
						align-items: center;
						justify-content: space-between;
						.row1_left {
							display: flex;
							align-items: center;
							i {
								font-size: rem(28);
								color: #ccc;
								margin: 0 rem(6) 0 0;
							}
							span {
								font-size: rem(26);
								color: $fc;
							}
							.bright {
								color: #ffd207;
							}
						}
						.row1_right {
							display: flex;
							align-items: center;
							span {
								font-size: rem(26);
								color: #999;
							}
						}
					}
					.row2 {
						p {
							line-height: rem(40);
							font-size: rem(28);
							color: $fc;
						}
					}
					.row3 {
						margin: rem(10) 0 0 0;
						ul {
							display: flex;
							justify-content: space-between;
							li {
								width: 20%;
								display: flex;
								justify-content: center;
								align-items: center;
								.pic {
									width: rem(120);
									height: rem(120);
									background: #eee;
									overflow: hidden;
									display: flex;
									justify-content: center;
									align-items: center;
									box-sizing: border-box;
									border: rem(2) solid #eee;
									img {
										/*width: 100%;*/
										height: 100%;
									}
								}
							}
						}
					}
					.row4 {
						p {
							line-height: rem(60);
							font-size: rem(28);
							color: #999;
						}
					}
				}
			}
		}
		.query_consult {
			margin: rem(20) 0 0 0;
			height: rem(90);
			background: #fff;
			padding: 0 rem(20);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.q_left {
				display: flex;
				align-items: center;
				i {
					font-size: rem(60);
					color: #999;
				}
			}
			.q_center {
				flex: 1;
				display: flex;
				align-items: center;
				span {
					font-size: rem(28);
					color: $fc;
				}
			}
			.q_right {
				.btn {
					width: rem(120);
					height: rem(60);
					background: $theme-color;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: rem(50);
					span {
						font-size: rem(28);
						color: #fff;
					}
				}
			}
		}
		.photo_article_details {
			margin: rem(20) 0 0 0;
			.content {
				.pic {
					background: #eee;
					width: 100%;
					height: rem(600);
					img {
						width: 100%;
					}
				}
			}
		}
	}
	
	footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		.f_content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			padding: rem(10);
		}
		.icon {
			margin: 0 rem(20);
			display: flex;
			justify-content: center;
			align-items: center;
			img {
				width: rem(40);
			}
		}
		.btn {
			height: rem(80);
			flex: 1;
			background: $theme-color;
			width: rem(200);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: rem(60);
			span {
				font-size: rem(28);
				color: #fff;
			}
		}
	}
</style>